<template>
    <div class="title-box" :style="padding">
        <Hover v-if="hover.showHover" :brickInfo="brickInfo" :hover="hover"/>
        <div class="title">
            <component :is="appearance.base.titleType"
                       :content="content"
                       :base="appearance.base"/>
        </div>
    </div>
</template>

<script>
    import Hover from '../common/mainpage/Hover.vue';
    import TitleOne from './titleTitles/TitleOne.vue';
    import TitleTwo from './titleTitles/TitleTwo.vue';
    import TitleThree from './titleTitles/TitleThree.vue';
    import TitleFour from './titleTitles/TitleFour.vue';
    import TitleFive from './titleTitles/TitleFive.vue';

    export default {
        name: 'YXTitle',
        props: {
            hover: {
                type: Object,
                default: _ => {
                    return {
                        showHover: false,
                        brickHover: true
                    };
                }
            },
            isEdit: {
                type: Boolean,
                default: false
            },
            brickInfo: {
                type: Object,
                default: _ => {
                    return {
                        active: false
                    };
                }
            },
            content: {
                type: Object,
                default: _ => {
                    return {
                        value: '标题文字',
                        link: ''
                    };
                }
            },
            appearance: {
                base: {
                    titleType: '',
                    color: 'rgba(248,89,89,1)'
                },
                padding: {
                    top: 10,
                    right: 15,
                    bottom: 10,
                    left: 15
                }
            }
        },
        components: {
            Hover,
            TitleOne,
            TitleTwo,
            TitleThree,
            TitleFour,
            TitleFive
        },
        computed: {
            padding() {
                let p = this.appearance.padding;
                return `padding: ${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`;
            }
        }
    }
</script>

<style scoped lang="scss">
    .title-box {
        position: relative;

        .title {
            height: 30px;
        }
    }
</style>
